<template>
  <div class="aaabbb_wrap">
    <div class="aaabbb">
      <div class="content_wrap">
        <div class="content">
          <div class="content_left">
            <div class="item">
              <div class="common_title">
                <div class="title">自动电话网</div>
                <div class="icon"></div>
              </div>
              <div class="common_box">
                <ChartBox98 :echartsData="echartsData3" />
              </div>
            </div>
            <div class="item">
              <div class="common_title">
                <div class="title">光缆网</div>
                <div class="icon"></div>
              </div>
              <div class="common_box">
                <ChartBox98 :echartsData="echartsData4" />
              </div>
            </div>
          </div>
          <div class="content_center">
            <div class="item">
              <div class="common_title">
                <div class="title">人工电话网</div>
                <div class="icon"></div>
              </div>
              <div class="common_box">
                <ChartBox99 :echartsData="echartsData1" />
              </div>
            </div>
            <div class="item">
              <div class="common_title">
                <div class="title">电话网进七天数据</div>
                <div class="icon"></div>
              </div>
              <div class="common_box">
                <ChartBox99 :echartsData="echartsData2" />
              </div>
            </div>
          </div>
          <div class="content_right">
            <div class="item">
              <div class="common_title">
                <div class="title">卫星图</div>
                <div class="icon"></div>
              </div>
              <div class="common_box"><ChartBox97 /></div>
            </div>
            <div class="item">
              <div class="common_title">
                <div class="title">数据通信网</div>
                <div class="icon"></div>
              </div>
              <div class="common_box"><ChartBox96 /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ChartBox99 from "../components/ChartBox99.vue";
import ChartBox98 from "../components/ChartBox98.vue";
import ChartBox97 from "../components/ChartBox97.vue";
import ChartBox96 from "../components/ChartBox96.vue";
export default {
  data() {
    return {
      aa: 11,
      echartsData1: {
        arr: [
          { name: "2023/11/02", value1: 100, value2: 10 },
          { name: "2023/11/03", value1: 80, value2: 20 },
          { name: "2023/11/04", value1: 40, value2: 40 },
          { name: "2023/11/05", value1: 30, value2: 60 },
          { name: "2023/11/06", value1: 20, value2: 70 },
          { name: "2023/11/07", value1: 5, value2: 80 },
          { name: "2023/11/08", value1: 77, value2: 100 },
        ],
        nameArr: ["图文", "视屏"],
        colors: ["#edbf00", "#32bfa4"],
        chartType: "bar",
      },
      echartsData2: {
        arr: [
          { name: "11/09", value1: 40, value2: 9 },
          { name: "11/10", value1: 30, value2: 20 },
          { name: "11/11", value1: 50, value2: 15 },
          { name: "11/12", value1: 45, value2: 35 },
          { name: "11/13", value1: 40, value2: 28 },
          { name: "11/14", value1: 45, value2: 40 },
          { name: "11/15", value1: 50, value2: 100 },
        ],
        nameArr: ["窄带数据", "宽带数据"],
        colors: ["#fca39b", "#4d93ff"],
        chartType: "line",
      },
      echartsData3: {
        arr: [
          {
            value: 5,
            name: "语音",
          },
          {
            value: 18,
            name: "文字",
          },
          {
            value: 20,
            name: "图像",
          },
          {
            value: 30,
            name: "综合",
          },
          {
            value: 27,
            name: "指令",
          },
        ],
        colors: ["#c17541", "#e98b00", "#4ac2fe", "#edbf00", "#2fbfa5"],
        chartName: "测试444",
        chartType: "pie",
        chartSize: ["40%", "75%"],
        chartCenter: ["40%", "50%"],
        legendObj: {
          orient: "vertical",
          right: "10",
          bottom: "20",
          icon: "circle",
          itemWidth: 20, // 设置宽度
          itemHeight: 20, // 设置高度
          itemGap: 20, // 设置间距
          textStyle: {
            fontSize: 16,
            color: "#000",
            fontWeight: "600",
          },
        },
      },
      echartsData4: {
        arr: [
          {
            value: 25,
            name: "长途光缆",
          },
          {
            value: 25,
            name: "中继光缆",
          },
          {
            value: 50,
            name: "接入网光缆",
          },
        ],
        colors: ["#5fb0ff", "#ffdb5c", "#a5e6bc"],
        chartName: "测试444",
        chartType: "area",
        chartSize: ["25%", "70%"],
        chartCenter: ["50%", "45%"],
        legendObj: {
          orient: "horizontal",
          bottom: "0",
          icon: "rect",
          itemWidth: 20, // 设置宽度
          itemHeight: 10, // 设置高度
          itemGap: 40, // 设置间距
          textStyle: {
            fontSize: 16,
            color: "#000",
            fontWeight: "600",
          },
        },
      },
    };
  },
  components: { ChartBox99, ChartBox98, ChartBox97, ChartBox96 },
};
</script>
<style lang="less" scoped>
.aaabbb_wrap {
  width: 100%;
  height: 100%;
  background: url("../assets/aaabbb20231201.png") center center no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.aaabbb {
  position: absolute;
  width: 86%;
  height: 84%;
  right: 1%;
  top: 14.5%;
  display: flex;
  flex-direction: column;
  .content_wrap {
    width: 100%;
    flex: 1 1 auto;
    height: 0;
    box-sizing: border-box;
    .content {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      display: flex;

      .item {
        width: 100%;
        flex: 1 1 auto;
        height: 0;
        background-color: #fff;
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        flex-direction: column;

        &:first-child {
          margin-bottom: 3%;
        }
        .common_title {
          flex: 0 0 auto;
          height: 30px;
          color: #000;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .title {
            font-size: 24px;
            font-weight: 700;
          }
          .icon {
            width: 60px;
            height: 70%;
            background-color: #f00;
            background: url("../assets/aa8894.png") center center no-repeat;
            background-size: 100% 100%;
          }
        }
        .common_box {
          flex: 1 1 auto;
          width: 100%;
          height: 0;
        }
      }

      .content_left {
        width: 32%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      .content_center {
        flex: 1 1 auto;
        width: 0;
        height: 100%;
        margin: 0 0.8%;
        display: flex;
        flex-direction: column;
      }
      .content_right {
        width: 32%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>
